<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>

    <div th:replace="./widget/base(title=${#servletContext.getAttribute('WEB.NAME')})"></div>
    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/index.css}">
    <style>

        .happy {
            /*height: 70px;*/
            position: absolute;
            z-index: 9999;
            width: 100%;
            /*height: auto;*/
        }

        .messenger {
            margin: 0 auto;
        }

        .messenger ul, ol {
            padding: 0;
            margin: 0 0 10px 25px;
        }

        .messenger li {
            list-style-type: none;
            line-height: 30px;
        }

        .messenger-message {
            margin-top: 0 !important;
        }

        .alert {
            margin-bottom: 20px;
            padding: 0 10px;
            height: 60px;
            line-height: 60px;
            border: 1px solid #ddd;
            color: #888;
        }

        .alert.alert-error {
            background: #fc0000;
            color: #ffffff;
            border-color: #fc0000;
        }

        .messenger-message a {
            text-decoration: none;
        }

        .messenger-message a:hover {
            background: #970A07;
        }

        .alert {
            text-shadow: none;
        }

        .alert-error {
            color: #fff;
            background-color: #e74c3c;
            border-color: transparent;
        }

        .alert, .alert h4 {
            color: #fff;
        }

        .alert {
            margin-top: 10px;
            padding: 0 35px 8px 0;
            margin-bottom: 0;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
            background-color: #970A07;
            border: 1px solid transparent;
        }

        .messenger-message-inner {
            text-align: center !important;
        }

    </style>
</head>
<body>
<noscript>当你看到这条信息，意味着 JavaScript 已被你的浏览器禁用，请开启 JavaScript 以使你的设备正常访问。</noscript>

<!--<div class="loading-wrap" id="loading" style="display: none;">-->
    <!--<div class="loading-content">-->
        <!--<div class="loading-round"></div>-->
        <!--<div class="loading-dot"></div>-->
    <!--</div>-->
<!--</div>-->

<!--[if lt IE 9]>
<div class="happy">
    <ul class="messenger">
        <li class="messeng-item">
            <div class="messenger-message alert message-error alert-error">
                <div style="float: right;">
                    <a href="javascript:;" style="padding:4px 12px; color:white; text-decoration: none;font-size: 20px"
                       onclick="removeSelf();">&times;</a>
                </div>
                <div class="messenger-message-inner" style="font-size: 16px;">您的浏览器版本过低，存在严重的安全隐患。建议您<a
                        href="http://browsehappy.com/" target="_blank"
                        style="color:white; font-weight: bold; padding: 0 2px;">升级浏览器</a>体验完整功能。
                </div>
            </div>
        </li>
    </ul>
</div>
<![endif]-->

<!--<div style="clear: both"></div>-->
<div class="header">

    <div class="header-logo">
        <!--<img src="/assets/img/header_logo.png" alt="logo">-->
        <span style="color:#ffffff;font-size:30px" th:utext="${#servletContext.getAttribute('WEB.NAME')}">Nimrod</span>
    </div>
    <div class="header-nav">
        <div class="nav-wrap">
            <ul class="nav-wrap-ul" id="parentViewMenuCategory">
                <!--<li class="nav-item parentViewMenuCategory" th:attr="data-menu-category=|${menuCategory.id}|">-->
                <!--<a href="javascript:;">-->
                <!--<i th:class="${menuCategory.icon}"></i>-->
                <!--<span class="nav-item-title" th:text="${menuCategory.name}">菜单1</span>-->
                <!--</a>-->
                <!--</li>-->
            </ul>
        </div>
        <a href="javascript:" class="nav-prev disabled" style="display: none"><i class="fa fa-chevron-up"></i></a>
        <a href="javascript:" class="nav-next" style="display: none"><i class="fa fa-chevron-down"></i></a>
    </div>
    <div class="header-user">
        <div class="user-avatar"><img th:src="@{/assets/img/avatar.png}" alt="avatar"></div>
        <h4 class="user-name ellipsis" th:text="${_user.username}">Username</h4>
        <i class="fa fa-caret-down"></i>
        <ul class="user-dropdown-menu">
            <li><a href="javascript:">
                <i class="fa fa-user"></i><span class="user-dropdown-menu-name">用户信息</span>
            </a></li>
            <li><a href="javascript:">
                <i class="fa fa-lock"></i><span class="user-dropdown-menu-name">修改密码</span>
            </a></li>
            <li id="logoutButton"><a href="javascript:">
                <i class="fa fa-sign-out"></i><span class="user-dropdown-menu-name">注销登录</span>
            </a></li>
        </ul>
    </div>
</div>
<div class="container">
    <div id="tabsContextMenu" class="easyui-menu" style="width: 140px;display: none">
        <div id="mm-tabclose" name="refresh" iconCls="fa fa-refresh">刷新</div>
        <div class="menu-sep"></div>
        <div id="div1" name="close" iconCls="fa fa-close">关闭</div>
        <div id="mm-tabcloseother" name="3">关闭其他</div>
        <div id="mm-tabcloseall" name="2">关闭全部</div>
        <div class="menu-sep"></div>
        <div id="mm-tabcloseright" name="4">关闭右侧标签</div>
        <div id="mm-tabcloseleft" name="5">关闭左侧标签</div>
    </div>
    <div id="layout" class="easyui-layout" data-options="fit:true">
        <!--<div data-options="region:'east',title:'East',split:true" style="width:100px;"></div>-->
        <div title="Menu" id="left"
             data-options="region:'west',split:false,border:true,noheader:false,hideCollapsedContent:false">
            <div class="easyui-accordion slide-menu" data-options="fit:true,border:false"></div>
        </div>
        <div title="Tab" id="center" data-options="region:'center',split:false,border:false,noheader:true">
            <div id="tabs" class="easyui-tabs"
                 data-options="split:false,border:false,fit:false,tools:'#tabsTools',onContextMenu:onContextMenu"
                 style="width:100%;height:100%;">
            </div>
            <div id="tabsTools">
                <a href="javascript:" class="easyui-linkbutton" plain="true" iconCls="fa fa-dashboard"
                   onclick="tabsTo('#tabs',0)"></a>
                <a href="javascript:" class="easyui-linkbutton" plain="true" iconCls="fa fa-refresh"
                   onclick="refreshTabIframe('#tabs')"></a>
                <a href="javascript:" class="easyui-linkbutton" plain="true" iconCls="fa fa-close"
                   onclick="closeSelectedTab('#tabs')"></a>
            </div>

        </div>
        <div title="Footer" id="bottom" data-options="region:'south',split:false,border:true,noheader:true">
            <div class="footer" th:utext="${#servletContext.getAttribute('WEB.FOOTER')}">Copyright &copy; 2018 nimrod.All
                rights reserved.
            </div>
        </div>
    </div>
</div>

<!--[if IE 7]>
<script type="text/javascript">

    $(window).resize(function () {
        $('.header').height($(window).height() - 76);
    }).resize();

</script>
<![endif]-->

<script type="text/javascript">

    $(window).load(function () {
        $("#loading").fadeOut();
    });

    $(function () {

        parentViewMenuCategory();
        addTab('#tabs', '工作台', '/system/workbench', 'fa fa-dashboard', false, -1);

        $('#logoutButton').click(function () {
            if (window.confirm('确定要注销登录吗？')) {
                expressui.ajax({
                    dataType: 'json',
                    url: Api.User.LOGOUT,
                    success: function (data) {
                        window.location.href = Page.User.LOGIN + '?state=logout';
                    },
                    error: function (xhr) {
                        alert("注销失败");
                    }
                });
                return true;
            } else {
                //alert("取消");
                return false;
            }

        });

    });

    function pageTurning() {
        var page = 0, pages = ($('.nav-wrap-ul').height() / 70) - 1;
        if (page < pages) {
            $('.nav-prev,.nav-next').show();
        }

        $(document).on('click', '.nav-prev,.nav-next', function () {
            if ($(this).hasClass('disabled')) return;
            if ($(this).hasClass('nav-next')) {
                page++;
                $('.nav-wrap-ul').stop().animate({'margin-top': -70 * page}, 200);
                if (page === pages) {
                    $(this).addClass('disabled');
                    $('.nav-prev').removeClass('disabled');
                } else {
                    $('.nav-prev').removeClass('disabled');
                }

            } else {
                page--;
                $('.nav-wrap-ul').stop().animate({'margin-top': -70 * page}, 200);
                if (page === 0) {
                    $(this).addClass('disabled');
                    $('.nav-next').removeClass('disabled');
                } else {
                    $('.nav-next').removeClass('disabled');
                }
            }
        });
    }

    function removeSelf() {
        var parent = document.getElementsByTagName('body')[0];

        var getElementsByClassName = function (searchClass, node, tag) {
            if (document.getElementsByClassName) {
                var nodes = (node || document).getElementsByClassName(searchClass), result = [];
                for (var i = 0; node === nodes[i++];) {
                    if (tag !== "*" && node.tagName === tag.toUpperCase()) {
                        result.push(node)
                    }
                }
                return result
            } else {
                node = node || document;
                tag = tag || "*";
                result = [];
                var classes = searchClass.split(" "),
                    elements = (tag === "*" && node.all) ? node.all : node.getElementsByTagName(tag),
                    patterns = [],
                    current,
                    match;
                var i = classes.length;
                while (--i >= 0) {
                    patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));
                }
                var j = elements.length;
                while (--j >= 0) {
                    current = elements[j];
                    match = false;
                    for (var k = 0, kl = patterns.length; k < kl; k++) {
                        match = patterns[k].test(current.className);
                        if (!match) break;
                    }
                    if (match) result.push(current);
                }
                return result;
            }
        };
        var happy = getElementsByClassName('happy')[0];
        parent.removeChild(happy);
    }

    /**
     * @desc 父级菜单分类
     */
    function parentViewMenuCategory() {
        var parentViewMenuCategory = $('#parentViewMenuCategory');
        expressui.ajax({
            url: Api.User.VIEW_MENU_CATEGORY + '/list_all_parent_by_user_id/' + _user.id,
            success: function (data) {
                if (data) {
                    var viewMenuCategory = data;
                    if (viewMenuCategory) {
                        for (var i = 0; i < viewMenuCategory.length; i++) {
                            var id = viewMenuCategory[i].id;
                            var name = viewMenuCategory[i].name;
                            var icon = viewMenuCategory[i].icon;
                            if (i === 0) {
                                // 第一个父级菜单默认选中
                                parentViewMenuCategory.append('<li class="parent-view-menu-category nav-item selected" data-view-menu-category="' + id + '"><a href="javascript:"><i class="' + icon + '"></i><span class="nav-item-title">' + name + '</span> </a> </li>')
                            } else {
                                parentViewMenuCategory.append('<li class="parent-view-menu-category nav-item" data-view-menu-category="' + id + '"><a href="javascript:"><i class="' + icon + '"></i><span class="nav-item-title">' + name + '</span> </a> </li>')
                            }
                        }
                    }

                    pageTurning();

                    $('.parent-view-menu-category').on('click', function () {
                        var viewMenuCategoryId = $(this).data('view-menu-category');
                        childViewMenuCategory(this, viewMenuCategoryId);

                        var viewMenuCategoryName = $(this).find('span').html();
                        $($('#layout').layout('panel', 'west')).panel({title: viewMenuCategoryName});

                    });

                    // 默认点击第一个父级菜单分类，并显示其所有子级菜单分类
                    $('.parent-view-menu-category').eq('0').trigger('click');

                }
            }
        });
    }

    /**
     * @desc 显示二级子菜单菜单
     * @param currentSelector
     * @param viewMenuCategoryId
     */
    function childViewMenuCategory(currentSelector, viewMenuCategoryId) {
        removeAllFirstMenuSelectedClass(currentSelector);
        removeAccordionPanel();
        var slideMenu = $('.slide-menu');
        if (!viewMenuCategoryId) {
            return;
        }

        expressui.ajax({
            url: Api.User.VIEW_MENU_CATEGORY + '/list_all_child_by_parent_id_and_user_id',
            data: {
                parentId: viewMenuCategoryId,
                userId: _user.id
            },
            success: function (data) {
                if (data) {
                    var childViewMenuCategory = data;
                    for (var i = 0; i < childViewMenuCategory.length; i++) {
                        var childViewMenuCategoryId = childViewMenuCategory[i].id;
                        childViewMenuCategory[i].selected = (i === 0);

                        childViewMenuCategory[i].title = childViewMenuCategory[i].name;
                        childViewMenuCategory[i].iconCls = childViewMenuCategory[i].icon;
                        childViewMenuCategory[i].content = '<div id="childViewMenuCategoryAndViewMenu_' + childViewMenuCategoryId + '"></div>';
                        slideMenu.accordion('add', childViewMenuCategory[i]);

                        childViewMenuCategoryAndViewMenu('#childViewMenuCategoryAndViewMenu_' + childViewMenuCategoryId, childViewMenuCategoryId);
                    }
                }
            }
        });

    }

    /**
     * @desc 显示三级子菜单和四级子菜单
     * @param selector
     * @param parentId
     */
    function childViewMenuCategoryAndViewMenu(selector, parentId) {
        expressui.ajax({
            url: Api.User.VIEW_MENU_CATEGORY + '/list_all_child_view_menu_category_and_view_menu_by_parent_id_and_user_id',
            data: {
                parentId: parentId,
                userId: _user.id
            },
            success: function (data) {
                if (data) {
                    var childViewMenuCategoryAndViewMenu = data;
                    $(selector).tree({
                        loadFilter: function (data) {
                            childViewMenuCategoryAndViewMenu = data.data ? data.data : data;
                            for (var i = 0; i < childViewMenuCategoryAndViewMenu.length; i++) {
                                if (!childViewMenuCategoryAndViewMenu[i].url) {
                                    childViewMenuCategoryAndViewMenu[i].state = 'closed';
                                } else {
                                    childViewMenuCategoryAndViewMenu[i].state = 'open';
                                }
                                childViewMenuCategoryAndViewMenu[i].text = childViewMenuCategoryAndViewMenu[i].name;
                            }
                            return childViewMenuCategoryAndViewMenu;
                        },
                        data: childViewMenuCategoryAndViewMenu,
                        lines: true,
                        animate: true,
                        onBeforeExpand: function (node, param) {
                            // 列出四级子菜单，直接可点击的菜单
                            $(selector).tree('options').url = Api.User.VIEW_MENU_CATEGORY + '/list_all_child_view_menu_category_and_view_menu_by_parent_id_and_user_id?parentId=' + node.id + '&userId=' + _user.id;
                            $(selector).tree('options').method = 'get';
                        },
                        onClick: function (node) {
                            if (node.url) {
                                addTab('#tabs', node.text, node.url, node.iconCls, true, node.id);
                            } else {
                                $(selector).tree('toggle', node.target);
                            }
                        }
                        // onDblClick:function (node) {
                        // $(selector).tree('toggle',node.target);
                        // }
                    });
                }
            }
        });
    }

    /**
     * @desc 移除左侧Accordion已有的菜单
     */
    function removeAccordionPanel() {
        var slideMenu = $('.slide-menu');
        var panels = slideMenu.accordion('panels');
        var panelsLength = panels.length;
        if (panelsLength > 0) {
            for (var i = 0; i < panelsLength; i++) {
                slideMenu.accordion('remove', 0);
            }
        }
    }

    /**
     * @desc 移除所有一级父菜单的 selected class，然后 selected 当前被点击的一级菜单
     * @param currentSelector
     */
    function removeAllFirstMenuSelectedClass(currentSelector) {
        $('.parent-view-menu-category').each(function (i, e) {
            $(e).removeClass('selected');
        });
        $(currentSelector).addClass('selected');
    }

    /**
     * @desc 添加 tab
     * @param tabsSelector
     * @param title
     * @param url
     * @param iconCls
     * @param closable
     * @param index
     */
    function addTab(tabsSelector, title, url, iconCls, closable, index) {
        var tabs = $(tabsSelector).tabs('tabs');
        var tabsLength = tabs.length;
        index = tabsLength + 1;
        if ($(tabsSelector).tabs('exists', title)) {
            $(tabsSelector).tabs('select', title);
            return;
        }
        var iframe = '<iframe src="' + Url.PAGE + url + '" scrolling="auto" frameborder="0" style="border:0;width:100%;height:100%;overflow:hidden;"></iframe>';
        $(tabsSelector).tabs('add', {
            id: Math.random(),
            title: title,
            index: index,
            selected: true,
            closable: (closable === undefined) || (closable === null) || (closable === true),
            content: iframe, // iframe框架内加载
            // href:url, // 可能会出现元素重复加载的情况，js、css等都会出现问题
            // iconCls:'fa fa-file',
            iconCls: (iconCls === undefined) ? 'fa fa-file' : iconCls,
            fit: true,
            border: false,
            cache: false
        });

    }

    /**
     * @desc 跳转至指定 index
     * @param tabsSelector
     * @param index
     */
    function tabsTo(tabsSelector, index) {
        $(tabsSelector).tabs('select', index);
    }

    /**
     * @desc 关闭选中tab
     * @param tabsSelector
     */
    function closeSelectedTab(tabsSelector) {
        var tab = $(tabsSelector).tabs('getSelected');
        var index = $(tabsSelector).tabs('getTabIndex', tab);
        if (index !== 0) {
            $(tabsSelector).tabs('close', index);
        }
    }

    /**
     * @desc 刷新指定 tabs 内的 tab
     * @param tabsSelector
     */
    function refreshTabIframe(tabsSelector) {
        var tab = $(tabsSelector).tabs('getSelected');
        var iframe = tab.find('iframe')[0];
        iframe.contentWindow.location.href = iframe.src;
    }

    function onContextMenu(event, title, index) {
        event.preventDefault();
        if (index >= 0) {
            tabsTo('#tabs', index);
            $('#tabsContextMenu').menu('show', {
                left: event.pageX,
                top: event.pageY
            }).data('tabTitle', title);
        }
    }

    // tab右键菜单
    $('#tabsContextMenu').menu({
        onClick: function (item) {
            tabsContextMenu(this, item.name);
        }
    });

    function tabsContextMenu(menu, type) {
        var tabsSelector = $('#tabs');
        var tabs = tabsSelector.tabs('tabs');
        var tabsTitle = [];
        var refreshTab, refreshIframe;
        var i;

        $.each(tabs, function (i, e) {
            var options = $(e).panel('options');
            if (options.closable)
                tabsTitle.push(options.title);
        });
        var currentTabTitle = $(menu).data('tabTitle');
        var currentTabIndex = tabsSelector.tabs('getTabIndex', tabsSelector.tabs('getTab', currentTabTitle));
        switch (parseInt(type)) {
            case 1://关闭当前
                if (currentTabIndex === 0) {
                    $.messager.show({
                        title: '操作提示',
                        msg: '工作台不允许关闭'
                    });
                }
                if (currentTabIndex > 0) {
                    tabsSelector.tabs('close', currentTabTitle);
                }
                break;
            case 2://全部关闭
                for (i = 0; i < tabsTitle.length; i++) {
                    tabsSelector.tabs('close', tabsTitle[i]);
                }
                break;
            case 3://除此之外全部关闭
                for (i = 0; i < tabsTitle.length; i++) {
                    if (currentTabTitle !== tabsTitle[i])
                        tabsSelector.tabs('close', tabsTitle[i]);
                }
                tabsSelector.tabs('select', currentTabTitle);
                break;
            case 4://当前侧面右边
                for (i = currentTabIndex; i < tabsTitle.length; i++) {
                    tabsSelector.tabs('close', tabsTitle[i]);
                }
                tabsSelector.tabs('select', currentTabTitle);
                break;
            case 5: //当前侧面左边
                for (i = 0; i < currentTabIndex - 1; i++) {
                    tabsSelector.tabs('close', tabsTitle[i]);
                }
                tabsSelector.tabs('select', currentTabTitle);
                break;
            case 6: //刷新
                refreshTab = tabsSelector.tabs('getSelected');
                refreshIframe = refreshTab.find('iframe')[0];
                refreshIframe.contentWindow.location.href = refreshIframe.src;
                break;
            case 7: //在新窗口打开
                refreshTab = tabsSelector.tabs('getSelected');
                refreshIframe = refreshTab.find('iframe')[0];
                window.open(refreshIframe.src);
                break;
        }
    }

</script>
</body>
</html>